<template>
<!-- 轮播图基本样式 -->
  <div class='xtx-carousel'>
    <ul class="carousel-body">
      <!-- fade是指显示的图片，显示的图片由数据控制 -->
      <li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index === i}" @mouseenter="stop()" @mouseleave="start()">
        <RouterLink to="/">
          <img :src="item.imgUrl">
        </RouterLink>
      </li>
    </ul>
    <a @click="tagg(-1)" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
    <a @click="tagg(1)" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
    <div class="carousel-indicator">
      <!-- 激活点,数据控制激活点 -->
      <span  @click="index = i" v-for="(item,i) in sliders" :key="i" :class="{active:index === i}"></span>
    </div>
  </div>
</template>

<script>
// 1,得到后台值，显示默认数据
// 2,自动播放功能
// 3,左右页切换功能
// 4,小圆圈随着图片改变
// 5,点击小圆圈，小圆圈就会变成索引值图片
// 6,组件销毁时，销户定时器
import {onUnmounted, ref,watch} from 'vue'
export default {
  name: 'XtxCarousel',
  props:{
    sliders:{
      type:Array,
      default:()=>{
      }
    },
    // 自动播放
    autoPlay:{
      type:Boolean
    }
  },
  setup(props){
    // 定义初始图片的索引值
    let index = ref(0)
    let timer = null
    // 自动播放函数
    let autoFind = () =>{
      clearInterval(timer)
      // 定时器
      timer = setInterval(()=>{
        index.value++
        if(index.value > (props.sliders.length - 1)){
          index.value = 0
        }
      },2000)
      
    }

    // 什么时候使用定时器函数，数据从无到有且为true的时候，所以需要事件监听
    watch(()=>props.sliders,(newValue)=>{
      if(newValue.length && props.autoPlay){
        autoFind()
      }
    })
    
    // 暂停与继续
    const stop = () =>{
      if(timer) clearInterval(timer)
    }
    const start = () =>{
      if(props.sliders.length && props.autoPlay){
        autoFind()
      }
    }
    // 自动切换
    let tagg = (step) =>{
      const newIndex = index.value + step
      if(newIndex > (props.sliders.length-1)){
        index.value = 0
        return 
      }
      if(newIndex < 0){
        index.value = props.sliders.length-1
      }
      index.value = newIndex
    }

    // 组件销毁时销毁定时器
    onUnmounted(()=>{
      clearInterval(timer)
    })
    return {index,stop,start,tagg}
  }
  
 
 
}
</script>
<style scoped lang="less">
.xtx-carousel{
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  .carousel{
    &-body {
      width: 100%;
      height: 100%;
    }
    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.5s linear;
      &.fade {
        opacity: 1;
        z-index: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-indicator {
      position: absolute;
      left: 0;
      bottom: 20px;
      z-index: 2;
      width: 100%;
      text-align: center;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0,0,0,0.2);
        border-radius: 50%;
        cursor: pointer;
        ~ span {
          margin-left: 12px;
        }
        &.active {
          background:  #fff;
        }
      }
    }
    &-btn {
      width: 44px;
      height: 44px;
      background: rgba(0,0,0,.2);
      color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 228px;
      z-index: 2;
      text-align: center;
      line-height: 44px;
      opacity: 0;
      transition: all 0.5s;
      &.prev{
        left: 20px;
      }
      &.next{
        right: 20px;
      }
    }
  }
  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}

</style>